<template>
  <van-row>
    <van-col span="12">用户信息</van-col>
    <van-col span="12" style="text-align: right">
      <van-button @click="$router.push('/')" type="success"
        >返回游戏</van-button
      >
      <van-button type="primary" @click="popupshow = true">修改昵称</van-button>
    </van-col>
  </van-row>
  <van-cell-group>
    <van-cell title="用户名" :value="User.userName" />
    <van-cell title="昵称" :value="User.nickName" />
    <van-cell title="分数" :value="User.score" />
  </van-cell-group>
  <van-cell title="参与游戏" />
  <div style="padding: 2px">
    <van-row
      v-for="(game, index) in games"
      :key="game.id"
      @click="ShowGame(game.id)"
      :class="index % 2 == 0 ? 'on' : 'off'"
    >
      <van-col span="2">{{ index + 1 }}</van-col>
      <van-col span="11"
        >{{ game.description
        }}<van-tag type="primary">{{ game.gameType }}</van-tag>
        <van-tag type="success">{{ game.playType }}</van-tag></van-col
      >
      <van-col span="11">{{ game.gameContext }}</van-col>
     </van-row>
  </div>
  <van-popup
    v-model:show="popupshow"
    position="bottom"
    :style="{ height: '50%' }"
  >
    <div>修改昵称</div>
    <van-cell-group inset>
      <van-field v-model="User.nickName" label="昵称" placeholder="修改昵称" />
    </van-cell-group>
    <van-button type="secondary" @click="popupshow = false"> 关闭 </van-button>
    <van-button type="success" data-bs-dismiss="modal" @click="change()">
      保存
    </van-button>
  </van-popup>
</template>

<script>
import { usePlayStore } from "@/stores/playstore";
import { inject } from "vue";
var apiroot = import.meta.env.VITE_ROOTAPIURL + "api/Game/";
var axios = null;
export default {
  data() {
    return {
      popupshow: false,
      User: {
        id: "",
        userName: "测试",
        nickName: "",
        score: "",
      },
      games: [],
    };
  },
  created() {
    var me = this;
    const store = usePlayStore();
    axios = inject("axios");
    var getplayerapi =
      apiroot + "GetPlayerByUserName?name=" + store.User.profile.name;
    //const axios = inject("axios");
    axios({
      url: getplayerapi,
      method: "get",
      headers: {
        Authorization: "Bearer " + store.User.access_token,
      },
    })
      .then(function (response) {
        me.User.id = response.data.id;
        me.User.userName = response.data.userName;
        me.User.nickName = response.data.nickName;
        me.User.score = response.data.score;
      })
      .catch(function (error) {
        console.log(error);
      });

    var getgamesapi =
      apiroot + "GetPlayerGames?name=" + store.User.profile.name;
    axios({
      url: getgamesapi,
      method: "get",
      headers: {
        Authorization: "Bearer " + store.User.access_token,
      },
    })
      .then(function (response) {
        me.games = response.data;
      })
      .catch(function (error) {
        console.log(error);
      });
  },
  methods: {
    ShowGame(gameid) {
      const store = usePlayStore();
      store.gameid = gameid;
      this.$router.push("/gamedetails");
    },
    change() {
      var me = this;
      var url = apiroot + "UpdateNickName";
      //const axios = inject("axios");
      const store = usePlayStore();
      var data = { playerid: this.User.id, nickname: this.User.nickName };
      axios({
        url: url,
        method: "post",
        headers: {
          Authorization: "Bearer " + store.User.access_token,
        },
        data: data,
      })
        .then(function (response) {
          me.popupshow = false;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>
<style scoped>
.on {
  background: #eeeeee;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 3.5mm;
  border-top: 1px solid #aaaaaa;
}

.off {
  padding: 4px;
  font-size: 3.5mm;
  padding-top: 15px;
  padding-bottom: 15px;
  border-top: 1px solid #aaaaaa;
}
</style>
